<template>
  <div id="navPage" class="flex">
    <div style="width: 230px">热门彩种</div>
    <div style="flex: 1" class="nav_content">
      <el-tabs type="border-card" v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane label="首页" name="first"></el-tab-pane>
        <el-tab-pane label="购彩大厅" name="second"></el-tab-pane>
        <el-tab-pane label="优惠活动" name="third"></el-tab-pane>
        <el-tab-pane label="彩票资讯" name="fouth"></el-tab-pane>
        <el-tab-pane label="走势图标" name="five"></el-tab-pane>
        <el-tab-pane label="开奖公告" name="six"></el-tab-pane>

      </el-tabs>

    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        activeName: 'first'
      }
    },
    methods: {
      handleClick (el) {
        switch (el.index) {
          case '0': this.$router.push('/content'); break
          case '1': this.$router.push('/hall/list'); break
          case '2': this.$router.push('/active'); break
          case '3': this.$router.push('/news'); break
          case '4': this.$router.push('/charts'); break
          case '5': this.$router.push('/message'); break
          default: break
        }
      }
    }

  }
</script>

<style lang="less">
  #navPage {
    height: 42px;
    line-height: 42px;
    width: 1000px;
    margin: auto;
    color: #fff;
    font-size: 16px;
    .nav_content{
      a:hover{
        color: white;
      }

      .item:hover{
        background-color: #d2161a;
      }
    }
    .nav_content>div{
      width: 100%;
    }
    /*.el-tabs el-tabs--top.el-tabs--border-card{*/
      /*width: 100%;*/
    /*}*/
    .el-tabs__nav{
      width: 100%;
       background-color: #e4393c;
      text-align: left;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__nav >div{
      font-size: 16px;
      width: 16.6%;
      color: white;
      text-align: center;
    }
    .el-tabs__nav >div:hover{
      background-color: #d2161a;
    }
    .el-tabs__content{
      display: none;
    }
    .el-tabs__item.is-active {
      color: white;
      background-color: #d2161a;
      border-right-color: transparent;
      border-left-color: transparent;
    }

  }
</style>
